<script setup>
import { RouterView } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isLoggedIn = ref(false)
const userInfo = ref(null)
const searchQuery = ref('')
const cartCount = ref(0)

// 初始化时检查用户登录状态
const checkLoginStatus = () => {
  const user = localStorage.getItem('user')
  if (user) {
    const parsedUser = JSON.parse(user)
    isLoggedIn.value = parsedUser.isLoggedIn
    userInfo.value = parsedUser
  } else {
    isLoggedIn.value = false
    userInfo.value = null
  }
  
  // 模拟购物车数据
  const cart = localStorage.getItem('cart')
  cartCount.value = cart ? JSON.parse(cart).length : 0
}

// 登出功能
const handleLogout = () => {
  localStorage.removeItem('user')
  isLoggedIn.value = false
  userInfo.value = null
  router.push('/login')
}

// 搜索功能
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({ path: '/search', query: { q: searchQuery.value } })
  }
}

// 跳转购物车
const goToCart = () => {
  router.push('/cart')
}

onMounted(() => {
  checkLoginStatus()
})
</script>

<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="container">
        <div class="top-nav-content">
          <div class="top-nav-left">
        <router-link to="/home" class="nav-item">购物首页</router-link>
        <a href="#" class="nav-item">聚划算</a>
        <a href="#" class="nav-item">天猫超市</a>
        <a href="#" class="nav-item">全球购</a>
      </div>
          <div class="top-nav-right">
            <a href="#" class="nav-item">网站导航</a>
            <a href="#" class="nav-item">我的购物</a>
            <a href="#" class="nav-item">我的购物</a>
            <a href="#" class="nav-item">收藏夹</a>
            <router-link to="/cart" class="nav-item">购物车</router-link>
            <router-link to="/ai-chat" class="nav-item ai-assistant">
            <span class="ai-icon">🤖</span>
            AI购物助手
          </router-link>
          <router-link to="/social" class="nav-item social-item">
            <span class="social-icon">📱</span>
            社区
          </router-link>
            <template v-if="isLoggedIn">
              <span class="nav-item welcome-text">欢迎, {{ userInfo?.username }}</span>
              <router-link to="/profile" class="nav-item">个人中心</router-link>
              <a href="#" class="nav-item" @click.prevent="handleLogout">退出登录</a>
            </template>
            <template v-else>
              <router-link to="/login" class="nav-item">登录</router-link>
              <router-link to="/register" class="nav-item">注册</router-link>
            </template>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-area">
      <div class="container">
        <div class="search-content">
          <div class="logo">
            <router-link to="/home">
              <img src="https://img.alicdn.com/imgextra/i3/O1CN01K6wP6d1gK5wP6z6d1_!!6000000000667-2-tps-143-59.png" alt="购物" class="logo-image" />
              <img src="https://img.alicdn.com/imgextra/i3/O1CN01K6wP6d1gK5wP6z6d1_!!6000000000667-2-tps-143-59.png" alt="购物" class="logo-image" />
            </router-link>
          </div>
          <div class="search-box">
            <input 
              type="text" 
              v-model="searchQuery" 
              placeholder="搜索商品"
              @keyup.enter="handleSearch"
              class="search-input"
            />
            <button @click="handleSearch" class="search-btn">搜索</button>
          </div>
          <div class="cart-icon" @click="goToCart">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01yW5vOQ1tF9z0Z4Z6X_!!6000000005939-2-tps-24-24.png" alt="购物车" class="cart-icon-img" />
            <span class="cart-text">购物车</span>
            <span class="cart-count" v-if="cartCount > 0">{{ cartCount }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 商品分类导航 -->
    <div class="category-nav">
      <div class="container">
        <div class="category-content">
          <div class="category-all">
            <a href="#" class="category-title">全部分类</a>
          </div>
          <div class="category-list">
            <a href="#" class="category-item"><span class="cat-icon">👗</span>女装</a>
            <a href="#" class="category-item"><span class="cat-icon">👔</span>男装</a>
            <a href="#" class="category-item"><span class="cat-icon">👟</span>鞋靴</a>
            <a href="#" class="category-item"><span class="cat-icon">👜</span>箱包</a>
            <a href="#" class="category-item"><span class="cat-icon">📱</span>数码</a>
            <a href="#" class="category-item"><span class="cat-icon">📺</span>家电</a>
            <a href="#" class="category-item"><span class="cat-icon">🏠</span>家居</a>
            <a href="#" class="category-item"><span class="cat-icon">💄</span>美妆</a>
            <a href="#" class="category-item"><span class="cat-icon">👶</span>母婴</a>
            <a href="#" class="category-item"><span class="cat-icon">🍔</span>食品</a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 路由视图 -->
    <RouterView />
    
    <!-- 底部信息 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3><span class="footer-icon">🛒</span>购物指南</h3>
            <ul>
              <li><a href="#"><span class="li-icon">👤</span>新用户注册</a></li>
              <li><a href="#"><span class="li-icon">📋</span>购物流程</a></li>
              <li><a href="#"><span class="li-icon">💳</span>支付方式</a></li>
              <li><a href="#"><span class="li-icon">❓</span>常见问题</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3><span class="footer-icon">🔄</span>售后服务</h3>
            <ul>
              <li><a href="#"><span class="li-icon">↩️</span>退货政策</a></li>
              <li><a href="#"><span class="li-icon">🔄</span>换货流程</a></li>
              <li><a href="#"><span class="li-icon">💬</span>投诉建议</a></li>
              <li><a href="#"><span class="li-icon">🛎️</span>售后服务</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3><span class="footer-icon">ℹ️</span>关于我们</h3>
            <ul>
              <li><a href="#"><span class="li-icon">🏢</span>公司介绍</a></li>
              <li><a href="#"><span class="li-icon">📞</span>联系我们</a></li>
              <li><a href="#"><span class="li-icon">👥</span>招贤纳士</a></li>
              <li><a href="#"><span class="li-icon">🔒</span>隐私政策</a></li>
            </ul>
          </div>
          <!-- 新增社交媒体区域 -->
          <div class="footer-section">
            <h3><span class="footer-icon">🔗</span>关注我们</h3>
            <div class="social-icons">
              <a href="#" class="social-icon">
                <img src="https://img.alicdn.com/imgextra/i1/O1CN01Z7X5Xs1vX5Xs1vX5_!!6000000006453-2-tps-48-48.png" alt="微信" />
              </a>
              <a href="#" class="social-icon">
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01Z7X5Xs1vX5Xs1vX6_!!6000000006454-2-tps-48-48.png" alt="微博" />
              </a>
              <a href="#" class="social-icon">
                <img src="https://img.alicdn.com/imgextra/i3/O1CN01Z7X5Xs1vX5Xs1vX7_!!6000000006455-2-tps-48-48.png" alt="抖音" />
              </a>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>© 2024 购物平台. 版权所有</p>
          <p>© 2024 购物平台. 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器样式 - 宽度限制为75%并居中 */
.app-container {
  width: 75%;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* AI购物助手特殊样式 */
.ai-assistant {
  background-color: #4a90e2;
  color: white !important;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.ai-assistant:hover {
  background-color: #357abd;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.ai-icon {
  margin-right: 4px;
  font-size: 14px;
}

/* 社区功能特殊样式 */
.social-item {
  background-color: #ff6b6b;
  color: white !important;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.social-item:hover {
  background-color: #ee5253;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.social-icon {
  margin-right: 4px;
  font-size: 14px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
  padding: 0;
}

/* 对于大屏幕，我们可以设置一个最大宽度，但在小屏幕上完全自适应 */
@media (min-width: 1920px) {
  .container {
    max-width: 1920px;
    margin: 0 auto;
  }
}

/* 顶部导航栏 */
.top-nav {
  background-color: #f2f2f2;
  height: 36px;
  border-bottom: 1px solid #e5e5e5;
}

.top-nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  font-size: 12px;
}

.nav-item {
  color: #666;
  margin: 0 8px;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #ff0036;
}

/* 搜索区域 */
.search-area {
  background-color: #fff;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.search-content {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.logo {
  width: 143px;
  height: 59px;
}

.logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.search-box {
  flex: 1;
  display: flex;
  width: 100%;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 0 15px;
  border: 2px solid #ff0036;
  border-right: none;
  font-size: 14px;
  outline: none;
}

.search-btn {
  width: 80px;
  height: 40px;
  background-color: #ff0036;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #e60029;
}

.cart-icon {
  position: relative;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cart-icon-img {
  width: 24px;
  height: 24px;
}

.cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #ff0036;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 商品分类导航 */
.category-nav {
  background-color: #ff0036;
  height: 40px;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.category-content {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.category-all {
  width: 190px;
  height: 100%;
  background-color: #ff4400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-title {
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.category-list {
  flex: 1;
  display: flex;
  gap: 30px;
  padding-left: 20px;
}

.category-item {
  color: white;
  font-size: 14px;
  font-weight: bold;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cat-icon {
  font-size: 16px;
}

.category-item:hover {
  opacity: 0.8;
}

/* 底部信息 */
.footer {
  background-color: #fff;
  margin-top: 30px;
  padding: 30px 0;
  border-top: 1px solid #e5e5e5;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.footer-section h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-icon {
  font-size: 20px;
}

.footer-section ul li a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.li-icon {
  font-size: 12px;
}

/* 社交媒体图标样式 */
.social-icons {
  display: flex;
  gap: 15px;
  padding-top: 10px;
}

.social-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background-color 0.3s;
}

.social-icon:hover {
  transform: translateY(-3px);
  background-color: #e5e5e5;
}

.social-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section a {
  font-size: 12px;
  color: #666;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: #ff0036;
}

.footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}
</style>
